import React from 'react';
import { View, Text, StyleSheet, Platform, StatusBar, Dimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const SafeAreaDebug: React.FC = () => {
    // 使用react-native-safe-area-context获取真实的安全区域信息
    const insets = useSafeAreaInsets();

    // 获取状态栏高度
    const getStatusBarHeight = () => {
        if (Platform.OS === 'android') {
            return StatusBar.currentHeight || 0;
        }
        return 0;
    };

    // 获取底部安全区域高度 - 与SafeAreaWrapper保持一致的逻辑
    const getBottomSafeAreaHeight = () => {
        // 直接使用insets.bottom，这是系统提供的真实底部安全区域高度
        return insets.bottom;
    };

    const statusBarHeight = getStatusBarHeight();
    const bottomSafeAreaHeight = getBottomSafeAreaHeight();
    const { height, width } = Dimensions.get('window');
    const screenHeight = Dimensions.get('screen').height;
    const systemUIHeight = screenHeight - height;
    const screenRatio = height / width;

    // 检测方法分析
    const getDetectionMethod = () => {
        if (insets.bottom > 0) {
            return `react-native-safe-area-context检测 (${insets.bottom}px)`;
        } else {
            return '未检测到底部安全区域 (0px)';
        }
    };

    return (
        <View style={styles.debugContainer}>
            <Text style={styles.debugTitle}>安全区域调试信息</Text>
            <Text style={styles.debugText}>平台: {Platform.OS}</Text>
            <Text style={styles.debugText}>窗口高度: {height}</Text>
            <Text style={styles.debugText}>屏幕高度: {screenHeight}</Text>
            <Text style={styles.debugText}>系统UI高度: {systemUIHeight}</Text>
            <Text style={styles.debugText}>状态栏高度: {statusBarHeight}</Text>
            <Text style={styles.debugText}>底部安全区域: {bottomSafeAreaHeight}</Text>
            <Text style={styles.debugText}>宽高比: {screenRatio.toFixed(2)}</Text>
            <Text style={styles.debugText}>检测方法: {getDetectionMethod()}</Text>
            <Text style={styles.debugText}>insets.top: {insets.top}</Text>
            <Text style={styles.debugText}>insets.bottom: {insets.bottom}</Text>
            <Text style={styles.debugText}>insets.left: {insets.left}</Text>
            <Text style={styles.debugText}>insets.right: {insets.right}</Text>
            <Text style={styles.debugText}>说明: 现在使用react-native-safe-area-context动态获取，不再写死数值</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    debugContainer: {
        position: 'absolute',
        top: 100,
        left: 20,
        right: 20,
        backgroundColor: 'rgba(0,0,0,0.8)',
        padding: 15,
        borderRadius: 8,
        zIndex: 9999,
    },
    debugTitle: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 10,
        textAlign: 'center',
    },
    debugText: {
        color: 'white',
        fontSize: 12,
        marginBottom: 5,
    },
});

export default SafeAreaDebug;
